import React, { Component } from 'react';
// import * as echarts from 'echarts';

import EChartsReact from 'echarts-for-react';
import axios from 'axios';
import { Col, Row, Button, DatePicker } from 'antd';
import ButtonGroup from 'antd/lib/button/button-group';
import cookies from 'react-cookies'


class Information extends Component {
    state = {
        option: {
            title: {
                text: '24小时销售统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['交易笔数', '总交易额', '平均客单价']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '17', '18', '19', '29', '21', '22', '23', '24']
            },
            yAxis: {
                type: 'value',
                name:'金额'
            },
            series: []
        },
        type: 'hour',
        time: null
        //  .format('yyyy/MM/DD hh:mm:ss')
    }


    Get7DData = (date) => {
        let { option } = this.state

        axios
            .get(`http://localhost:5500/ant/ant/Sales/${cookies.load('userStore')}/GetStatisticalBy7D?start=${date}`)
            .then(response => {

                option.xAxis.data = [...response.data.xAxis]
                option.title.text = '7日销售统计'
                option.series = response.data.data
                this.setState({ option: option })
                this.echarts.getEchartsInstance().setOption(this.state.option)
            })
    }
    Get24HData = (date) => {
        let { option } = this.state

        axios
            .get(`http://localhost:5500/ant/ant/Sales/${cookies.load('userStore')}/GetStatisticalBy24?start=${date}`)
            .then(response => {

                option.xAxis.data = [...response.data.xAxis]
                option.title.text = '24小时销售统计'
                option.series = response.data.data
                this.setState({ option: option })
                this.echarts.getEchartsInstance().setOption(this.state.option)
            })
    }
    Get1MData = (date) => {
        let { option } = this.state

        axios
            .get(`http://localhost:5500/ant/ant/Sales/${cookies.load('userStore')}/GetStatisticalBy1M?start=${date}`)
            .then(response => {

                option.xAxis.data = [...response.data.xAxis]
                option.title.text = '本月销售统计'
                option.series = response.data.data
                this.setState({ option: option })
                this.echarts.getEchartsInstance().setOption(this.state.option)
            })

    }
    componentWillUnmount=()=>{
        this.echarts.dispose()
        this.echarts = undefined
    }
    componentDidMount = () => {
        let { option } = this.state
        axios
            .get(`http://localhost:5500/ant/ant/Sales/${cookies.load('userStore')}/GetStatisticalBy24`)
            .then(response => {
                option.xAxis.data = [...response.data.xAxis]
                option.title.text = '24小时销售统计'
                option.series = response.data.data
                this.setState({ option: option },()=>{

                    this.echarts.getEchartsInstance().setOption(this.state.option);
                })
            })
    }
    render() {
        let { option } = this.state
        return (
            <div style={{ padding: '20px' }}>
                <Row>
                    <Col span={12}>
                        <span>选择开始日期：</span>
                        <DatePicker
                            ref={e => this.timeInput = e}
                            placeholder="请选择日期" onChange={e => {
                                if (e == null) {
                                    this.setState({ time: null })
                                    return;
                                }
                                this.setState({ time: e.format('yyyy/MM/DD hh:mm:ss') }, () => {

                                    switch (this.state.type) {
                                        case 'hour':
                                            this.Get24HData(this.state.time)
                                            break;
                                        case 'day':
                                            this.Get7DData(this.state.time)
                                            break;
                                        case 'month':
                                            this.Get1MData(this.state.time)
                                            break;

                                        default:
                                            break;
                                    }

                                })
                            }} />
                    </Col>
                    <Col span={12}>
                        <span>统计时长：</span>
                        <ButtonGroup>
                            <Button onClick={() => {
                                this.setState({ type: 'hour' }, () => {
                                    this.Get24HData(this.state.time)
                                })
                            }}>24h</Button>
                            <Button onClick={() => {
                                this.setState({ type: 'day' }, () => {
                                    this.Get7DData(this.state.time)
                                })
                            }}>七日</Button>
                            <Button onClick={() => {
                                this.setState({ type: 'month' }, () => {
                                    this.Get1MData(this.state.time)
                                })
                            }}>一个月</Button>
                        </ButtonGroup>
                    </Col>
                </Row>
                <EChartsReact
                    ref={(ec) => this.echarts = ec}
                    option={option}
                    loadingOption={this.state.option}
                    notMerge={true}
                    key={Date.now}
                    lazyUpdate={true}
                    style={{ width: '100%', height: '600px' }}
                >
                </EChartsReact>
            </div>
        );
    }
}

export default Information;
